<template>
<div id="app">
<div id="top">
<div id="logo"><img src="./assets/logo.png"></div>
<nav>
<ul>

<!--<li><router-link to="/home">首页</router-link></li>
<li><router-link to="/about">关于我们</router-link></li>
<li><router-link to="/page">文章内容</router-link></li>
<li><router-link to="/hello">原始文件</router-link></li>-->

<router-link to="/" exact tag="li">首页</router-link>
<!--当路径是“/”时，默认是全包含模式，所以无论是点击的哪个只要有"/",该项就会被选中。可以用exact改成精准模式。解决这个问题。-->
<router-link :to="{path: '/about'}" tag="li">关于我们</router-link>
<router-link :to="page" tag="li">文章内容</router-link>
<router-link to="/hello" tag="li">原始文件（重定向首页）</router-link>
<router-link to="/user" tag="li">用户列表</router-link>
</ul>
</nav>
</div>
<div>
<input type="button" @click="forwardHandle" value="前进">
<input type="button" @click="backHandle" value="后退">
<input type="button" @click="goHandle" value="go 指定到哪一步">
<input type="button" @click="pushHandle" value="push 指定到某个路径(保存记录)">
<input type="button" @click="replaceHandle" value="replace 指定到某个路径(不保存记录)">
</div>
<!--<router-view name="slider"></router-view>-->
<transition :name="transiformName">
<router-view/>  
</transition>

</div>
</template>

<script>
export default {
  name: 'App',
  data(){
  	return {
  		page: '/page',
  		transiformName: 'left'
  	}
  },
  methods: {
      
//借助于 router 的实例方法，通过编写代码来实现导航的切换
//
//back  回退一步
//forward 前进一步
//go  指定前进回退步数
//push 导航到不同url，向 history 栈添加一个新的记录
//replace 导航到不同url，替换 history 栈中当前记录

    forwardHandle(){
        this.$router.forward()
    },
    backHandle(){
        this.$router.back()
    },
    goHandle(){
        this.$router.go(-2)
    },
    pushHandle(){
        this.$router.push("/user")
        
//      // 字符串
//      this.$router.push('home')
//      
//      // 对象
//      this.$router.push({ path: 'home' })
//      
//      // 命名的路由
//      this.$router.push({ name: 'user', params: { userId: 123 }})
//      
//      // 带查询参数，变成 /register?plan=private
//      this.$router.push({ path: 'register', query: { plan: 'private' }})

    },
    replaceHandle(){
        this.$router.replace("/page")
    }
  },
  watch:{
      $route(to,from){
//        console.log(to.meta.index)
//        console.log(from.meta.index)
          if(to.meta.index > from.meta.index){
              this.transiformName = "left"
          }else{
              this.transiformName = "right"
          }
      }
  }
}
</script>

<style>
.left-enter{ transform:translateX(100%)}
.left-enter-to{ transform:translateX(0)}
.left-enter-active, .left-leave-active{ transition:1s;}
.left-leave{ transform:translateX(0)}
.left-leave-to{ transform:translateX(-100%)}

.right-enter{ transform:translateX(-100%)}
.right-enter-to{ transform:translateX(0)}
.right-enter-active, .right-leave-active{ transition:1s;}
.right-leave{ transform:translateX(0)}
.right-leave-to{ transform:translateX(100%)}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
